<template>
  <!-- 筛选区 -->
  <div class="sub-filter">
    <!-- 品牌 -->
    <div class="item">
      <div class="head">品牌：</div>
      <div class="body">
        <!-- <a href="javascript:;">全部</a> -->
        <a
          :class="{ active: i.selected }"
          @click="setBrand(i)"
          href="javascript:;"
          v-for="i in subCates.brands"
          :key="i.id"
        >
          {{ i.name }}
        </a>
      </div>
    </div>
    <!-- 规格 =>一个或多个 -->
    <div class="item" v-for="md in subCates.saleProperties" :key="md.id">
      <div class="head">{{ md.name }}：</div>
      <div class="body">
        <!-- <a href="javascript:;">全部</a> -->
        <a
          :class="{ active: item.selected }"
          @click="setProperties(item, md)"
          href="javascript:;"
          v-for="item in md.properties"
          :key="item.id"
        >
          {{ item.name }}
        </a>
      </div>
    </div>
  </div>
</template>
<script>
import { inject } from 'vue'
export default {
  name: 'SubFilter',
  setup () {
    const subCates = inject('subCates')
    // 接收过滤条件
    const filterParams = inject('filterParams')
    // 点击品牌高亮1
    const setBrand = (brand) => {
      // 3.避免重复点击 => 已经选中不执行下方代码
      if (brand.selected) return
      console.log(brand)
      // 存储选中id => 使用排序字段进行列表筛选
      filterParams.value.brandId = brand.id
      /**
       * 1.清除之前选中元素 => selected=false
       * 2.当前点击按钮改为true
       * 3.避免重复点击 => 已经选中不执行下方代码
       */
      subCates.value.brands.forEach(brand => {
        brand.selected = false
      })
      brand.selected = true
    }

    // 点击规格属性高亮
    const setProperties = (prop, item) => {
      // 3.避免重复点击
      if (prop.selected) return
      /**
       * 需求：存储多个规格下选中的属性数据 => filterParams.value.attrs =[{groupName:'规格名', propertyName:'选中的名'}]
       * 1.一个规格下只能存储一个属性 =>
       * 2.是否点击全部 =》 如果不是 =》 需要新增当前点击的属性
       * 3.点击全部不需要操作
       */
      // 根据规格名，判断当前规格下是否存储的有选中属性groupName
      const index = filterParams.value.attrs.findIndex(per => {
        return per.groupName === item.name
      })
      if (index > -1) {
        // filterParams.value.attrs当前前进规格之前有，需要删除
        filterParams.value.attrs.splice(index, 1)
      }
      // 判断不是全部
      if (prop.id !== null) {
        // 不是全部 => 存储当前点击属性
        filterParams.value.attrs.push({
          groupName: item.name,
          propertyName: prop.name
        })
      }
      console.log(prop, item)
      /**
       * prop:规格下的属性
       * item:规格数据（规格名和规格下的所有属性）
       */
      // 遍历数组，将点击后的所有selected变为false
      item.properties.forEach(prop => {
        prop.selected = false
      })
      // 将点击后的属性变为高亮
      prop.selected = true
    }
    return { subCates, setBrand, setProperties }
  }
}
</script>
<style scoped lang='less'>
// 筛选区
.sub-filter {
  background: #fff;
  padding: 25px;
  .item {
    display: flex;
    padding: 10px 0;
    .head {
      width: 80px;
      color: #999;
    }
    .body {
      flex: 1;
      a {
        display: inline-block;
        margin-right: 36px;
        margin-bottom: 20px;
        transition: all 0.3s;
        border: 1px solid #eee;
        padding: 6px;
        &.active,
        &:hover {
          color: @xtxColor;
          border-color: @xtxColor;
        }
      }
    }
  }
}
</style>
